<template>
	<div class="login dflex_c dflex_d_c">
		<!-- <el-image style="width: 50px;height: 50px;" src="/static/img/login_log.jpg" fit="contain"></el-image> -->
		<div class="title">{{ $api.config().name }}</div>
		<el-form :model="form" :rules="rules" ref="ruleForm" class="login_form">
			<el-form-item prop="username" ref="username"><el-input v-model="form.username" placeholder="账号" @keyup.enter.native="enter"></el-input></el-form-item>
			<el-form-item prop="password" ref="password">
				<el-input v-model="form.password" placeholder="密码" show-password @keyup.enter.native="submitForm('ruleForm')"></el-input>
			</el-form-item>
			<div class="login_btn dflex_c margin_t_50 crpr" @click="submitForm('ruleForm')">登 录</div>
		</el-form>
	</div>
</template>

<script>
const __name = 'wmzmall-history-storage';
export default {
	data() {
		return {
			form: {
				username: '',
				password: ''
			},
			loading: false,
			rules: {
				username: [
					{
						required: true,
						message: '账号不可以为空',
						trigger: ['blur', 'keyup']
					}
				],
				password: [
					{
						required: true,
						message: '密码不可以为空',
						trigger: 'change'
					}
				]
			},
			business_data: {}
		};
	},
	methods: {
		enter() {
			if (this.form.username) {
				this.$refs.password.$el.querySelector('input').focus();
			}
		},
		getFirstMenu(menus) {
			for (let i = 0; i < menus.length; i++) {
				if (menus[i].url) {
					menus[i].path = menus[i].url;
					menus[i].fullPath = menus[i].url;
					return menus[i];
				}
			}
			return {};
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid, obj) => {
				this.$api.set_unvalidated_form_focus(this, obj);
				if (valid) {
					if (this.loading) {
						return;
					}
					let data = this.form;
					let tabCurUrl = '';

					this.loading = true;

					 this.$func.wmzadmin
						.maincall('user/loginV2', data)
						.then(res => {
							if (res.code == 200) {
								uni.setStorage({
									key: 'wmzadmin_last_username',
									data: data.username
								});
								
								uni.setStorageSync('wmzadmin_user', res.datas.userInfo);
								
								if (!res.datas.userInfo.space_id) {
									this.$message.success('space_id不存在');
									return
								}
								uni.setStorageSync('wmzadmin_user_space_id', res.datas.userInfo.space_id);
								
								
								uni.setStorageSync('wmzadmin_user_shop_id', res.datas.userInfo.shop_id);

								uni.setStorage({
									key: 'uni_id_token',
									data: res.datas.token
								});

								uni.setStorage({
									key: 'uni_id_token_expired',
									data: res.datas.tokenExpired
								});

								uni.setStorage({
									key: 'version',
									data: this.$api.config().versionName
								});

								if (res.datas.historyStorageRes.data.length > 0) {
									tabCurUrl = res.datas.historyStorageRes.data[0].tab_cur_url;
									res.datas.historyStorageRes.data[0].storage_datas.forEach(x => {
										uni.setStorage({
											key: x.key,
											data: x.value
										});
									});
								}

								if (res.datas.menuRes.data.length > 0) {
									uni.setStorage({
										key: '__menu',
										data: res.datas.menuRes.data
									});

									const home = this.getFirstMenu(res.datas.menuRes.data);

									uni.setStorage({
										key: '__menu_first',
										data: home
									});

									uni.redirectTo({
										url: home.url
									});

									this.$message.success('登录成功!');

									uni.$emit('loginIn');
								}
								return;
							}

							this.$message.error(res.msg);
						})
						.finally(err => {
							this.loading = false;
						});
				}
			});
		}
	},
	mounted() {
		this.$refs.username.$el.querySelector('input').focus();
		uni.getStorage({
			key: 'wmzadmin_last_username',
			success: res => {
				this.form.username = res.data;
				this.$refs.password.$el.querySelector('input').focus();
			}
		});
		document.getElementsByTagName('html')[0].style.cssText =
			'--status-bar-height:0px; --top-window-height:0px; --window-left:0px; --window-right:0px; --window-margin:0px; --window-top:calc(var(--top-window-height) + 0px); --window-bottom:0px;';
	}
};
</script>

<style>
page {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url('/static/img/login_bg.png');
	background-size: cover;
	padding: 0;
	margin-top: 0;
}

.login {
	width: 880px;
	height: 560px;
	background: #fff;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.16);
	border-radius: 20px;
}

.login >>> .el-form-item.is-error .el-input__inner,
.login >>> .el-form-item.is-error .el-input__inner:focus {
	border: none;
	border-bottom: 1px solid #d9d9d9;
}

.title {
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 100px;
}

>>> .login_form .el-input__inner {
	border: none;
	border-bottom: 1px solid #d9d9d9;
	border-radius: 0;
	padding-left: 6px;
	font-size: 14px;
	width: 260px;
	height: 40px;
	color: #ff6a6c;
	background: #fff;
}

.login_btn {
	width: 260px;
	height: 40px;
	background-color: #ff6a6c;
	border-radius: 4px;
	font-size: 18px;
	font-weight: 800;
	color: #fff;
}

.login_btn:hover {
	background-color: rgba(255, 106, 108, 0.8);
}
</style>
